<template>
    <div class="job-left-root">
        <div class="brow"></div>
        <div v-for="(g,gi) in entries">
            <div class="group_box">
                <p class="group_item">{{g.group}}</p>
            </div>
            <div class="children" v-for="(c ,ci) in g.children">
                <div class="child_box" v-on:click="clickChild(gi,ci)">
                    <div :class="{'child_active': gi === activeEntry.g && ci === activeEntry.c,'child_normal':gi!==activeEntry.g||ci!==activeEntry.c}"></div>
                    <p :class="{'child_text_active': gi === activeEntry.g && ci === activeEntry.c,'child_text_normal':gi!==activeEntry.g||ci!==activeEntry.c}">
                        {{c}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'Left',
    props: {
      entries: {
        type: Array,
        default: function() {
          return [
            { group: '简历管理', children: ['全部', '平台推荐'] },
            { group: '沟通', children: ['人才沟通', '企业顾问'] },
            { group: '职位进展', children: ['待入职', '入职成功', '不合适'] }
          ]
        }
      },
      activeEntry: {
        type: Object,
        default: function() {
          return {
            g: 0,
            c: 0
          }
        }
      }
    },
    methods: {
      clickChild: function(g, c) {
        this.$emit('click-item', g, c)
      }
    }
  }
</script>

<style scoped>
    p {
        margin: 0;
    }

    .job-left-root {
        display: flex;
        flex-direction: column;
    }


    .children {
        display: flex;
        flex-direction: column;
    }

    .child_box {
        width: 200px;
        height: 40px;
        background: rgba(255, 255, 255, 1);

        display: flex;
        align-items: center;

        margin-top: 1px;
    }

    .child_text_normal {
        font-size: 14px;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);

        margin-left: 24px;
    }

    .child_text_active {
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 115, 0, 1);

        margin-left: 24px;
    }

    .group_box {
        width: 200px;
        height: 40px;
        background: rgba(243, 243, 247, 1);

        display: flex;
        align-items: center;
    }


    .group_item {

        font-size: 16px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);

        margin-left: 28px;
    }


    .child_active {
        width: 3px;
        height: 32px;
        background: rgba(255, 115, 0, 1);
    }

    .child_normal {
        width: 3px;
        height: 32px;
        background: rgba(255, 255, 255, 0);
    }

    .brow {
        width: 200px;
        height: 3px;
        background: rgba(255, 115, 0, 1);
    }
</style>